<template>
    <el-form-item class="xFimageAttr">
        <div class="attr-item-edit-wrapper row">
            <div class="col-item col-2"><p class="attr-item-title">统一设置切换效果</p></div>
            <div class="col-item"><el-switch v-model="switchType" active-color="#2d8cf0" inactive-color="#a5a5a5" /></div>
        </div>
        <div class="attr-item-edit-wrapper row" v-if="switchType"><switch-animate v-model="animateInfoAll" /></div>
        <div class="file-list" v-if="tempValue" v-for="(item, index) in tempValue" :key="index">
            <div :class="!switchType ? 'item-wrap' : 'item-wrap-line'">
                <div class="item" :style="getStyle(item.thumbPath)" @mouseenter="showId = item.id" @mouseleave="showId = 0">
                    <div style="background-color: rgba(0,0,0,.6); height: 20px; line-height: 20px; width: 100%; color: white; bottom: 0px; left: 0px; font-size: 12px; position: absolute;">{{item.fileName}}</div>
                    <div class="tool-list" v-show="item.id === showId"><i class="iconfont icon-delete" @click="del(index, item)"></i></div>
                </div>
                <switch-animate v-if="!switchType" v-model="item.animateInfo" @changeTime="changeTime" />
            </div>
        </div>

        <add-assets @before-open="_beforeOpen" :size="{ height: 140 }" />
    </el-form-item>
</template>

<script>
import AddAssets from '@/components/program-editor/add-assets';
import uploadMixin from '@/mixins/assets-upload-mixin';
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'attr-sxc-imageSrcList',
    components: {
        AddAssets,
        'switch-animate': () => import('@/components/program-editor/props-attr/switch-animate')
    },
    props: {
        imageSrcList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tempValue: [],
            showId: 0,
            switchType: false,
            animateInfoAll: {
                imgSwitchTime: 0,
                imgAnimates: ''
            }
        };
    },
    watch: {
        imageSrcList(v1, v2) {
            if (JSON.stringify(v1) === JSON.stringify(v2)) {
                return;
            }
            this.initData();
        },
        tempValue(v1, v2) {
            this.change();
        },
        animateInfoAll(v1, v2) {
            if (!v1) {
                return;
            }
            if (JSON.stringify(v1) === JSON.stringify(v2)) {
                return;
            }
            this.tempValue = this.tempValue.map(item => {
                if (!item.animateInfoAll) {
                    item.animateInfoAll = {
                        imgSwitchTime: '',
                        imgAnimates: ''
                    };
                }
                item.animateInfoAll.imgSwitchTime = v1.imgSwitchTime;
                item.animateInfoAll.imgAnimates = v1.imgAnimates;
                return { ...item };
            });
            this.setDurationLen();
        },
        switchType(v1) {
            this.tempValue = this.tempValue.map(item => {
                item.switchType = v1;
                return { ...item };
            });
            this.setDurationLen();
        }
    },
    mixins: [uploadMixin],
    created() {
        this.initData();
    },
    computed: {
        ...mapGetters('programs', ['currScene', 'currElement'])
    },
    methods: {
        ...mapActions('programs', ['deleteElmentItemById', 'setDurationLen']),
        initData() {
            let list = [];
            this.imageSrcList.forEach(item => {
                list.push(item);
            });
            this.tempValue = [...list];
            if (this.tempValue.length > 0) {
                if (typeof this.tempValue[0].switchType !== 'undefined' && this.tempValue[0].switchType) {
                    this.switchType = this.tempValue[0].switchType;
                    this.animateInfoAll = this.tempValue[0].animateInfoAll;
                }
            } else {
                this.switchType = false;
                this.animateInfoAll = {
                    imgSwitchTime: 0,
                    imgAnimates: ''
                };
            }
        },
        getResultImageSrcList() {
            let list = [];
            for (let i = 0, len = this.tempValue.length; i < len; i++) {
                list.push(this.tempValue[i]);
            }
            return list;
        },
        changeTime(val) {
            let timeValues = 0;
            this.tempValue.forEach(function(item) {
                if (item.animateInfo) {
                    if (item.animateInfo.imgSwitchTime * 1 > 0) {
                        timeValues = timeValues + item.animateInfo.imgSwitchTime;
                    }
                }
            });
            timeValues = 0;
        },
        change() {
            this.$emit('update:imageSrcList', this.getResultImageSrcList());
        },
        del(index, item) {
            this.tempValue.splice(index, 1);
            this['deleteElmentItemById'](item.id);
        },
        _beforeOpen() {
            this.beforeOpen({
                cid: 2,
                limit: 5,
                propName: {
                    propsValue: 'imageSrcList'
                },
                selected: [...this.imageSrcList]
            });
        }
    }
};
</script>

<style lang="scss" scoped></style>
